<template>
  <div class="header">
    <div class="top_nav">
      <div class="right">
        <a href="http://trader.ukdfx.com" class="login active">登录</a>
        <a href="http://trader.ukdfx.com/register" class="open">立即开户</a>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=2568486231&site=qq&menu=yes" class="qq"><i></i></a>
        <a href="javascript:;" class="flag"><i></i></a>
      </div>
    </div>
    <div class="bot_nav">
      <div class="logo" @click.stop="toggleList"><router-link to="/"><img src="./img/logo.png" alt=""></router-link></div>
      <div class="more">
        <a href="javascript:void(0)" class="icon" @click.stop='toggleList'></a>
        <div class="list" id="list" v-show="showList">
          <div @click.stop="toggleAbout">
            <div class="title">
              关于我们
              <span v-bind:class="[changeAbout?'active':'']"></span>
            </div>
            <ul class="about" v-if="showAbout">
              <li @click="toggleList"><router-link to="/about_why">公司介绍</router-link></li>
              <li @click="toggleList"><router-link to="/complicance">合规监管</router-link></li>
              <li @click="toggleList"><router-link to="/advantages">我们的优势</router-link></li>
            </ul>
          </div>
          <div @click.stop="toggleOurPlatform">
            <div class="title">
              我们的平台
              <span v-bind:class="[changeOurPlatform?'active':'']"></span>
            </div>
            <ul class="about" v-if="showOurPlatform">
              <li @click.stop="toggleList"><router-link to="/pc">桌面版MT4</router-link></li>
              <li @click.stop="toggleList"><router-link to="/mobile">移动版MT4</router-link></li>
            </ul>
          </div>
          <div @click.stop="toggleNotice">
            <div class="title">
              入市须知
              <span v-bind:class="[changeNotice?'active':'']"></span>
            </div>
            <ul class="about" v-if="showNotice">
              <li @click.stop="toggleList"><router-link to="/notice">开户须知</router-link></li>
              <li @click.stop="toggleList"><router-link to="/withdraw">出入金流程</router-link></li>
            </ul>
          </div>
          <div>
            <div class="title" @click.stop="toggleList">
              <router-link to="/activity">市场活动</router-link>
            </div>
          </div>
          <div @click.stop="toggleGuide">
            <div class="title">
              交易指南
              <span v-bind:class="[changeGuide?'active':'']"></span>
            </div>
            <ul class="about" v-if="showGuide">
              <li @click.stop="toggleList"><router-link to="/guidelist">外汇基础知识</router-link></li>
              <li @click.stop="toggleList"><router-link to="/advantage">外汇交易优势</router-link></li>
              <li @click.stop="toggleDrawer">
                <div>外汇交易指南</div>
                <div class="drawer" v-if="showDrawer" @click.stop="toggleList">
                  <router-link to="/control">外汇交易的风险控制</router-link>
                  <router-link to="/operation">外汇交易如何操作</router-link>
                </div>
              </li>
              <li @click.stop="toggleAnalysis">
                <div>外汇基本分析</div>
                <div class="drawer" v-if="showAnalysis" @click.stop="toggleList">
                  <router-link to="/basicanalysis">基本分析</router-link>
                  <router-link to="/technology">技术分析</router-link>
                  <router-link to="/icontype">图表基本类型</router-link>
                </div>
              </li>
              <li @click.stop="toggleList"><router-link to="/FXGlossary">外汇词汇</router-link></li>
              <li @click.stop="toggleList"><router-link to="/faq">常见问题</router-link></li>
            </ul>
          </div>
          <div @click.stop="togglePartner">
            <div class="title">
              合作伙伴
              <span v-bind:class="[changePartner?'active':'']"></span>
            </div>
            <ul class="about" v-if="showPartner">
              <li @click.stop="toggleList"><router-link to="/partner">我们的合作优势</router-link></li>
              <li @click.stop="toggleList"><router-link to="/ib">IB经纪商计划</router-link></li>
              <li @click.stop="toggleList"><router-link to="/organization">机构合作方案</router-link></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        changeAbout:false,
        changeOurPlatform: false,
        showAnalysis:false,
        changeNotice: false,
        changeGuide: false,
        changePartner: false,
        showList: false, // 默认下拉列表隐藏
        showAbout: false, // 默认关于我们
        showOurPlatform: false, //我们的平台
        showNotice: false, //入市须知
        showGuide: false, //交易指南
        showDrawer: false, // 外汇交易子级页面
        showPartner: false // 交易伙伴
      }
    },
    methods: {
        aa(e) { // 点击空白区域隐藏列表
          e.cancleBubble = true;
          let _aa = document.querySelector('#list');
          _aa.style.display = 'none';
        },
        toggleList(e) {
          e.cancleBubble = true;
          let _aa = document.querySelector('#list');
          let aaStyle = _aa.style.display;
          if(aaStyle == 'none') {
            _aa.style.display = 'block';
          }else{
            _aa.style.display = 'none';
          };
          this.showAbout= false; // 默认关于我们
          this.showOurPlatform= false; //我们的平台
          this.showNotice= false; //入市须知
          this.showGuide= false; //交易指南
          this.showDrawer= false; // 外汇交易子级页面
          this.showPartner= false ;// 交易伙伴
          this.changeAbout = false; // 三角恢复原样
          this.changeOurPlatform = false;
          this.changeNotice = false;
          this.changeGuide = false;
          this.changePartner = false;
        },
        toggleAbout() {
          this.showOurPlatform = false,
          this.showNotice = false,
          this.showGuide = false,
          this.showPartner = false,
          this.showAbout = !this.showAbout,
          this.changeAbout=!this.changeAbout,
          this.changeOurPlatform = false,
          this.changeNotice = false,
          this.changeGuide = false,
          this.changePartner = false
        },
        toggleOurPlatform() {
          this.showAbout = false,
          this.showNotice = false,
          this.showGuide = false,
          this.showPartner = false,
          this.showOurPlatform = !this.showOurPlatform,
          this.changeOurPlatform=!this.changeOurPlatform,
          this.changeAbout = false,
          this.changeNotice = false,
          this.changeGuide = false,
          this.changePartner = false
        },
        toggleNotice() {
          this.showAbout = false,
          this.showOurPlatform = false,
          this.showGuide = false,
          this.showPartner = false,
          this.showNotice = !this.showNotice,
          this.changeNotice=!this.changeNotice,
          this.changeAbout = false,
          this.changeOurPlatform = false,
          this.changeGuide = false,
          this.changePartner = false
        },
        toggleGuide() {
          this.showAbout = false,
          this.showOurPlatform = false,
          this.showNotice = false,
          this.showPartner = false,
          this.showGuide = !this.showGuide,
          this.changeGuide=!this.changeGuide,
          this.changeAbout = false,
          this.changeOurPlatform = false,
          this.changeNotice = false,
          this.changePartner = false
        },
        togglePartner() {
          this.showAbout = false,
          this.showOurPlatform = false,
          this.showNotice = false,
          this.showGuide = false,
          this.showPartner = !this.showPartner,
          this.changePartner=!this.changePartner,
          this.changeAbout = false,
          this.changeOurPlatform = false,
          this.changeNotice = false,
          this.changeGuide = false
        },
        toggleDrawer() {
          this.showDrawer = !this.showDrawer
        },
        toggleAnalysis() {
          this.showAnalysis = !this.showAnalysis
        }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../../common/stylus/mixin"
  .header
    width: 100%
    box-sizing: border-box
    position: absolute
    z-index: 12
    .top_nav
      width: 100%
      height: 35px
      line-height: 35px
      padding-left: 30%
      background-color: rgba(0,0,0,.6)
      position: relative
      .right
        display: flex
        position: absolute
        right: 0
        a
          display: block
          text-align: center
          color: #fffffd
          font-size: 10px
          font-weight: bold
          margin: 0
          &.active
            color: #212123
            background-color: #ffcc00
          &.login
            width: 56px
          &.open
            width: 61px
          &.qq
            width: 40px
            height: 35px
            position: relative
            i
              display: inline-block
              width: 16px
              height: 16px
              position: absolute
              left: 0
              right: 0
              top: 0
              bottom: 0
              margin: auto
              bg-image('./img/qq')
          &.flag
            width: 51px
            height: 35px
            position: relative
            i
              display: inline-block
              width: 21px
              height: 14px
              position: absolute
              left: 0
              right: 0
              top: 0
              bottom: 0
              margin: auto
              bg-image('./img/china')
    .bot_nav
      height: 38px
      width: 100%
      display: flex
      justify-content: space-between
      align-items:center
      background-color: rgba(1,1,1,.8)
      padding: 0 18px
      position: relative
      z-index: 12
      box-sizing: border-box
      .logo
        width: 114px
        height: 18px
        a
          display: inline-block
          width: 114px
          height: 18px
          img
            width: 100%
            height: 100%
            vertical-align: top
      .more
        position: relative
        a
          &.icon
            display: inline-block
            width: 25px
            height: 20px
            bg-image('./img/more')
            position: absolute
            top: 0
            bottom: 0
            right: 0
            margin: auto
        .list
          width: 300px
          position: absolute
          top: 0.51rem
          right: -20px
          > div
            .title
              width: 100%
              height: 45px
              line-height: 45px
              padding-left: 25px
              padding-right: 25px
              box-sizing: border-box
              background-color: rgba(0,0,0,.9)
              color: #fff
              font-size: 14px
              position: relative
              border-bottom: 1px solid #999
              a
                color: #fff
                display: block
              span
                display: inline-block
                width: 17px
                height: 9px
                bg-image('./img/down')
                position: absolute
                right: 25px
                top: 0
                bottom: 0
                margin: auto
                &.active
                  bg-image('./img/up')
            ul.about
              width: 100%
              color: #fff
              background-color: rgba(102,102,102,.9)
              li
                min-height: 45px
                line-height: 45px
                width: 100%
                border-bottom: 1px solid #999
                padding-left: 40px
                &:last-child
                  border-bottom: none
                a
                  color: #fff
                  font-size: 14px
                  display: block
                div
                  color: #fff
                  font-size: 14px
                  &.drawer
                    width: 100%
                    padding-left: 20px
                    a
                      display: block
                      border-bottom: 1px solid #999
                      font-size: 13px
                      &:last-child
                        border-bottom: none
</style>
